<template>
  <!-- 弹窗 -->
  <el-drawer
    v-model="dialog.visible"
    :title="dialog.title"
    class="bridge-modal"
    direction="rtl"
    append-to-body
    @close="closeDialog"
  >
    <!-- 用户新增/编辑表单 -->
    <el-form
      ref="settingFormRef"
      :model="formData"
      :rules="rules"
      label-width="150px"
    >
      <el-form-item label="桥梁名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入名称"
          maxlength="100"
        />
      </el-form-item>
      <el-form-item label="管理（养）单位" prop="deptId">
        <el-input
          v-model="formData.deptId"
          placeholder="请输入管理（养）单位"
          maxlength="100"
        />
      </el-form-item>

      <el-form-item label="路线编号" prop="lineCode">
        <dictionary
          v-model="formData.lineCode"
          typeCode="roadLine"
          @change="handleChangeRoadLine"
        />
      </el-form-item>

      <el-form-item label="所属路段" prop="sectionId">
        <dictionary v-model="formData.sectionId" :typeCode="roadLineCode" />
      </el-form-item>

      <el-form-item label="所在政区" prop="areaId">
        <el-input
          v-model="formData.areaId"
          placeholder="请输入所在政区"
          maxlength="100"
        />
      </el-form-item>

      <el-form-item label="技术等级" prop="technicalGrade">
        <el-input
          v-model="formData.technicalGrade"
          placeholder="请输入技术等级"
          maxlength="100"
        />
      </el-form-item>
    </el-form>

    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { saveOrUpdateBridge, getBridgeById } from "@/api/report/bridge.api";
import { BridgeForm } from "@/api/report/bridge.types";

// 声明Emits
const emit = defineEmits(["update:modelValue", "success"]);

const props = defineProps({
  modelValue: {
    type: Object,
    default: undefined,
  },
});

const dialog = reactive({
  visible: props.modelValue?.visible || false,
  title: "新增桥梁",
});

const settingFormRef = ref(ElForm);
const roadLineCode = ref("");

const formData = reactive<BridgeForm>({
  name: "",
  deptId: "",
  lineCode: "",
  sectionId: "",
  areaId: "",
  technicalGrade: "",
});

const rules = {
  name: [{ required: true, message: "请输入桥梁名称", trigger: "blur" }],
  deptId: [
    { required: true, message: "请输入管理（养）单位", trigger: "blur" },
  ],
  lineCode: [{ required: true, message: "请输入路线编号", trigger: "blur" }],
  sectionId: [{ required: true, message: "请输入所属路段", trigger: "blur" }],
  areaId: [{ required: true, message: "请输入所在政区", trigger: "blur" }],
};

// 添加watch监听props变化
watch(
  () => props.modelValue?.visible,
  (newVal) => {
    dialog.visible = newVal;
    clearForm();
    if (props.modelValue?.id) {
      getById();
    }
  }
);

// 修改closeDialog方法，添加emit
const closeDialog = () => {
  dialog.visible = false;
  emit("update:modelValue", { ...props.modelValue, visible: false });
};

const getById = async () => {
  const res = await getBridgeById({ id: props.modelValue?.id });
  Object.assign(formData, res.data);
  roadLineCode.value = `P-${formData.lineCode}`;
};

//表单提交事件
async function handleSubmit() {
  await settingFormRef.value.validate();
  await saveOrUpdateBridge(formData, props.modelValue?.isUpdate);
  emit("success");
  closeDialog();
}

const handleChangeRoadLine = (val) => {
  roadLineCode.value = `P-${val}`;
};

const clearForm = () => {
  formData.name = "";
  formData.deptId = "";
  formData.lineCode = "";
  formData.sectionId = "";
  formData.areaId = "";
  formData.technicalGrade = "";
};
</script>

<style lang="scss" scoped>
.bridge-modal {
  width: 40vw;
}
</style>
